
<template>
  <div id="app">
    <div class="liDemo" v-for="item in list" :key="item.imgUrl">
      <SlideToDel
        @onClick="onClick"
        @onSlide="onSlide"
        :sliderId="item.id"
        :curSlideID="curSlideID"
        :handles="handles"
        :sensitivity="sensitivity"
      >
        <div class="df fg1 f-ac">
          <img :src="item.imgUrl" alt="" class="df f-js img" />
          <p class="df fg1">{{ item.title }}</p>
		  <div class="mc">{{item.mc}}</div>
		  <div class="jg">{{item.jg}}</div>
        </div>
      </SlideToDel>
    </div>
  </div>
</template>
 
<script>
import SlideToDel from "@/components/SlideToDel.vue";
export default {
  name: "App",
  components: {
    SlideToDel,
  },
  data: function () {
    return {
      list: [
        {
          imgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608116221510&di=694852c91e552e68a670f82815d5ad97&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201305%2F30%2F220025pxfkhykvkgkvuktq.jpg",
		  mc:'苹果',
		  jg:10,
          id: 0,
        },
		{
          imgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608116221510&di=694852c91e552e68a670f82815d5ad97&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201305%2F30%2F220025pxfkhykvkgkvuktq.jpg",
		  mc:'苹果',
		  jg:10,
          id: 0,
        },
		{
          imgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608116221510&di=694852c91e552e68a670f82815d5ad97&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201305%2F30%2F220025pxfkhykvkgkvuktq.jpg",
		  mc:'苹果',
		  jg:10,
          id: 0,
        },
		{
          imgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608116221510&di=694852c91e552e68a670f82815d5ad97&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201305%2F30%2F220025pxfkhykvkgkvuktq.jpg",
		  mc:'苹果',
		  jg:10,
          id: 0,
        },
       
      ],
      nihao: "bushiba",
      curSlideID: null,
      handles: [
        { title: "删除", id: 2 },
      ],
      sensitivity: 3
    };
  },
  methods: {
    onClick(val) {// 监听用户操作的，返回的val和handles对应
      console.log("csx click -> " + val);
    },
    onSlide(val) {// 监听当前滑动的哪个slider组件
      console.log("csx onSlide val:", val);
      this.curSlideID = val;
    },
  },
};
</script>
 
<style>
* {
  margin: 0;
  padding: 0;
  
}
 
html,
body,
#app {
  height: 100%;
}
 
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: rgba(220, 220, 220);
}
 
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.liDemo {
  color: #000;
  margin-bottom: 3px;
  height: 60px;
  line-height: 60px;
}
 
.img {
  width: 20%;
  height: auto;
  margin: 5px;
}
 
.df {
	
  display: flex;
  display: -webkit-flex;
}
.fg1 {
  flex-grow: 1;
}
.f-ac {
  align-content: center;
  -webkit-align-content: center;
}
.f-js {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.f-jc {
  justify-content: center;
  -webkit-justify-content: center;
}
.mc{
	width: 50px;
	height:20px;
	color: red;
	position: relative;
	top:-10px;
	left: -193px;
}
.jg{
	width: 50px;
	height:20px;
	color: red;
	position: relative;
	top:15px;
	left: -225px;
}
</style>
